import React from 'react';
import { Row, Col, Form, Input, InputNumber, Icon, Select } from 'antd';
import Button from '../ButtonPc';
import styles from '../index.less';

const { Option } = Select;

const SkillItem = ({ form, index, i, remove, ...rest }) => {
    const { getFieldDecorator } = form;

    return (
        <div className={styles.formWrapNew}>
            <div className={styles.itemHead}>
                <div>专业技能{i + 1}</div>
                <Icon
                    type="close-circle"
                    theme="filled"
                    style={{ fontSize: 16, color: '#49536C' }}
                    onClick={() => remove(index)}
                />
            </div>
            <Row gutter={120} {...rest}>
                <Col lg={12} md={24}>
                    <Form.Item label="技能">
                        {getFieldDecorator(`skillSkillName[${index}]`, {
                            initialValue: '',
                            rules: [
                                {
                                    required: true,
                                    message: '请输入技能',
                                    whitespace: true
                                }
                            ]
                        })(<Input placeholder="请输入技能" maxLength={100} allowClear />)}
                    </Form.Item>
                </Col>
                <Col lg={12} md={24}>
                    <Form.Item label="使用时长">
                        <Col span={24} style={{ display: 'flex', lineHeight: '40px', alignItems: 'center' }}>
                            {getFieldDecorator(`skillSkillDuration[${index}]`, {
                                initialValue: ''
                            })(
                                <InputNumber
                                    min={0}
                                    maxLength={10}
                                    precision={0}
                                    placeholder="请输入使用时长"
                                    style={{ width: '100%' }}
                                />
                            )}
                            <span style={{ marginLeft: 8 }}>月</span>
                        </Col>
                    </Form.Item>
                </Col>
                <Col lg={12} md={24}>
                    <Form.Item label="掌握程度">
                        {getFieldDecorator(`skillProficiency[${index}]`, {
                            rules: [
                                {
                                    required: true,
                                    message: '请选择掌握程度'
                                }
                            ]
                        })(
                            <Select
                                placeholder="请选择掌握程度"
                                allowClear
                                getPopupContainer={triggerNode => triggerNode.parentElement}
                                style={{ width: '100%' }}
                            >
                                <Option value={1}>一般</Option>
                                <Option value={2}>良好</Option>
                                <Option value={3}>熟练</Option>
                                <Option value={4}>精通</Option>
                            </Select>
                        )}
                    </Form.Item>
                </Col>
            </Row>
        </div>
    );
};

const Skill = ({ form }) => {
    const { getFieldDecorator } = form;

    const add = () => {
        const skillKeys = form.getFieldValue('skillKeys');
        const nowId = skillKeys[skillKeys.length - 1] + 1 || 0;
        const nextKeys = skillKeys.concat(nowId);
        form.setFieldsValue({
            skillKeys: nextKeys
        });
    };

    const remove = React.useCallback(k => {
        const skillKeys = form.getFieldValue('skillKeys');
        form.setFieldsValue({
            skillKeys: skillKeys.filter(key => key !== k)
        });
    }, []);

    getFieldDecorator('skillKeys', { initialValue: [] });
    const skillKeys = form.getFieldValue('skillKeys');

    return (
        <>
            {skillKeys.map((key, i) => (
                <SkillItem form={form} key={key} index={key} i={i} remove={remove} />
            ))}
            <div style={{ margin: '0 0 24px 0' }}>
                <Button block className={styles.addBtn} onClick={add} disabled={skillKeys.length >= 20}>
                    <Icon type="plus" /> 添加专业技能
                </Button>
            </div>
        </>
    );
};

export default Skill;
